<template>
  <div class="app-container">
    <div class="filter-container">
      <org-unit-select v-model="filters.orgUnitId" placeholder="请选择店铺" :org-unit-type="1" />
      <room-select v-model="filters.roomId" placeholder="请选择房间" :org-unit-id="filters.orgUnitId"/>
      <el-date-picker
        v-model="selectedDate"
        type="monthrange"
        align="right"
        unlink-panels
        range-separator="至"
        value-format="yyyy-MM"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        :picker-options="pickerOptions">
      </el-date-picker>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
      <el-button v-if="canPreviewData" v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handlePreview">预览本月数据</el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      border
      fit
      :height="tableHeight"
      :data="list"
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
      @selection-change="selsChange"
    >
      <el-table-column type="index" width="60" />
      <el-table-column prop="orgUnitName" label="店铺" min-width="240" />
      <el-table-column prop="roomName" label="房间" min-width="180" />
      <el-table-column prop="amount" label="余额(元)" width="200" :formatter="formatAmount" />
      <el-table-column prop="initAmount" label="初始金额(元)" width="200" :formatter="formatInitAmount" />
      <el-table-column prop="start" label="发放时间" width="180" />
      <el-table-column prop="end" label="失效时间" width="180" />
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="filters.page" :limit.sync="filters.limit" @pagination="loadPageList" />

    <el-dialog title="本月返利预览" width="60%" :visible.sync="previewDialogVisible" :close-on-click-modal="false">
      <el-table
        v-loading="previewLoading"
        border
        fit
        :height="480"
        :data="previewReturnMoney.records"
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column type="index" width="60" />
        <el-table-column prop="orgUnitName" label="店铺" min-width="240" />
        <el-table-column prop="roomName" label="房间" min-width="120" />
        <el-table-column prop="playCount" label="开本次数" width="90" />
        <el-table-column label="是否达标" width="90" :formatter="formatMeetsStandard" />
        <el-table-column prop="amount" label="金额(元)" width="110" :formatter="formatAmount" />
        <el-table-column prop="start" label="发放时间" width="156" />
        <el-table-column prop="end" label="失效时间" width="156" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="previewDialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import OrgUnitSelect from '../components/org-unit-select'
import RoomSelect from '../components/room-select'
import waves from '@/directive/waves' // waves directive
import { mapGetters } from 'vuex'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import util from '@/utils/util.js'
import { listLuckyMoney, previewReturnMoney } from '@/api/lucky-money'

export default {
  name: 'PlayRecords',
  components: { Pagination, OrgUnitSelect, RoomSelect },
  directives: { waves },
  data() {
    return {
      tableHeight: 260,
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      sels: [], // 列表选中列
      filters: {
        page: 1,
        limit: 20,
        orgUnitId: null,
        roomId: null
      },
      selectedDate: '',
      orderBy: {
        orderColumn: '',
        order: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()])
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date()
            const start = new Date(new Date().getFullYear(), 0)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 6)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      previewDialogVisible: false,
      previewLoading: false,
      previewReturnMoney: {
        records: null,
        excludes: []
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'formLabelWidth', 'dynamicColumn']),
    canPreviewData() {
      const roles = this.userInfo.roles || []
      return roles.indexOf('Admin') !== -1
    }
  },
  created() {
    this.tableHeight = window.innerHeight - 200
    this.loadPageList()
  },
  methods: {
    formatMeetsStandard(row) {
      if (row.playCount >= 30) {
        return '是'
      } else {
        return '否'
      }
    },
    formatAmount(row) {
      return util.currency.format(row.amount)
    },
    formatInitAmount(row) {
      return util.currency.format(row.initAmount)
    },
    loadPageList() {
      this.listLoading = true
      const param = { ...this.filters, ...this.orderBy }
      if (this.selectedDate && this.selectedDate.length >= 2) {
        param.start = this.selectedDate[0]
        param.end = this.selectedDate[1]
      }
      listLuckyMoney(param).then(({ success, message, data }) => {
        this.listLoading = false
        if (success) {
          const { records, total } = data || {}
          this.list = records
          this.total = total
        } else {
          this.$message({
            message: message || '查询列表失败',
            type: 'error'
          })
        }
      }, () => {
        this.listLoading = false
      })
    },
    handleFilter() {
      this.filters.page = 1
      this.loadPageList()
    },
    sortChange({ prop, order }) {
      this.orderBy.orderColumn = prop
      this.orderBy.order = order
      this.handleFilter()
    },
    selsChange(sels) {
      this.sels = sels
    },
    handlePreview() {
      this.previewDialogVisible = true
      this.previewLoading = true
      this.previewReturnMoney = {
        records: [],
        excludes: []
      }
      previewReturnMoney().then(({ success, message, data }) => {
        this.previewLoading = false
        if (success) {
          const { records, excludes } = data || {}
          this.previewReturnMoney.records = records
          this.previewReturnMoney.excludes = excludes
        } else {
          this.$message({
            message: message || '查询数据失败',
            type: 'error'
          })
        }
      }, () => {
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
